//引入 router
//createRouter用于创建路由实例
//createWebHashHistory 配置内部使用的hash 模式的路由
import { createRouter, createWebHashHistory } from 'vue-router';

import { userStore } from "@/store/user";


// //导入需要路由的组件
// import Home from '../pages/Home.vue'
// import About from '../pages/About.vue'
// import TodoList from '../pages/TodoList.vue'


//创建路由表
// const routes = [
//     {
//         path: '/',
//         name: 'Home',
//         component: Home
//     },
//     {
//         path: '/about',
//         name:'About',
//         component: About
//     },
//     {
//         path: '/todolist',
//         name:'TodoList',
//         component: TodoList
//     }
// ]

const routes = [
    {
        path: "/",
        redirect: "/home"
    },
    {
        path: "/home",
        component: () => import("../pages/Home.vue"),
        meta: { title: "网站首页" }
    },
    {
        path: "/article-:id(\\d+)",
        component: () => import("../pages/ArticleOne.vue"),
        // meta: { title: "" }
    },
    {
        name: "ArticlePage",
        path: "/article/:id(\\d+)/:page(\\d+)",
        component: () => import("../pages/ArticlePage.vue"),
        // meta: { title: "" }
    },
    {
        path: "/login",
        component: () => import("../pages/Login.vue"),
        meta: { title: "用户登录" }
    },
    {
        path: "/reg",
        component: () => import("../pages/Reg.vue"),
        meta: { title: "用户注册" }
    },
    {
        path: "/role",
        component: () => import("../pages/Role.vue"),
        meta: { title: "角色管理" }
    },
    {
        path: "/admin",
        component: () => import("../pages/Admin.vue"),
        meta: { title: "管理后台", auth: true },
        children: [
            {
                path: "",
                component: () => import("../pages/admin/Welcome.vue"),
                meta: { title: "欢迎页" },
            },
            {
                path: "/admin/role",
                component: () => import("../pages/admin/Role.vue"),
                meta: { title: "角色管理" },
            },
            {
                path: "/admin/user",
                component: () => import("../pages/admin/User.vue"),
                meta: { title: "用户管理" },
            },
            {
                path: "/admin/cms/article-type",
                component: () => import("../pages/admin/cms/ArticleType.vue"),
                meta: { title: "文章类别管理" },
            },
            {
                path: "/admin/cms/article",
                component: () => import("../pages/admin/cms/Article.vue"),
                meta: { title: "文章管理" },
            },
            {
                path: "/admin/:id(.+)",
                component: () => import("../pages/404.vue"),
                meta: { title: "资源未找到" },
            }
        ]
    },
    {
        path: "/demo",
        component: () => import("../pages/Demo.vue"),
        meta: { title: "权限演示" },
        children: [
            {
                path: "",
                component: () => import("../pages/demo/Page1.vue"),
                meta: { title: "如何人都能普通页面" },
            },
            {
                path: "page2",
                component: () => import("../pages/demo/Page2.vue"),
                meta: { title: "登录后才能进入的页面", auth: true },
            },
            {
                path: "page3",
                component: () => import("../pages/demo/Page3.vue"),
                meta: { title: "管理员和vip才能进入的页面", roles: ["admin", "vip"] },
            },
            {
                path: "page4",
                component: () => import("../pages/demo/Page4.vue"),
                meta: { title: "元素级的控制" },
            },
            {
                path: "upload",
                component: () => import("../pages/demo/Upload.vue"),
                meta: { title: "文件上传" },
            }

        ]
    },
    {
        path: "/:id(.+)",
        component: () => import("../pages/404.vue"),
        meta: { title: "资源未找到" },
    }
]

//创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

router.beforeEach((to, from) => {
    // console.info(to);
    if(to.meta.title) {
        document.title = to.meta.title;
    }
    return true;
})

router.beforeEach((to, from, next) => {
    let checkLogin = to.matched.some(record => record.meta.auth);//是否需要验证登录
    //这里使用matched循环查找不直接使用to.meta的原因：多层嵌套路由情况下,逐级检查
    console.debug(to.matched);
    console.debug(checkLogin);
    //如果需要检查登录或者角色
    if (checkLogin || to.meta.roles) {
        const store = userStore();
        if (!store.isLogin) {//如果没有登录,则跳转到登录
            next({ path: "/login" });
            return;
        }
        //如果要验证角色,但当前登录用户不具备该角色则跳转到404
        if (to.meta.roles && !to.meta.roles.includes(store.user.roleId)) {
            next({ path: "/404" });
            return;
        }
        next();
    } else {
        next();
    }
})
//导出路由对象，以供其它组件使用
export default router





